<template>
  <el-container class="main_con">
    <div class="header">{{ this.$route.meta.title }}</div>
    <div class="notice">
      <div class="item" v-for="(item, i) in list" :key="i" @click="itemEdit(item)">
        <div class="title">
          <div class="icon"><i class="el-sc-dingdan2"></i></div>
          <div class="txt">{{ item.name }}</div>
        </div>
        <div class="channel">
          <div class="single" v-for="(sitem, l) in item.channel" :key="l">
            <div class="title">{{ sitem.channelName }}</div>
            <div class="status">
              <i v-if="sitem.channelStatus == 1" class="el-icon-circle-check"></i>
              <i v-if="sitem.channelStatus == 0" class="el-icon-circle-close"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-container>
</template>

<script>
import {getNoticeConfigAll} from '@/api/mall/notice';
export default {
  data() {
    return {
      isLoading: false,
      setObj: {},
      list: []
    };
  },
  components: {},
  created() {
    //计算路由长度获取数据
    let key = '';
    if (this.$route.matched.length == 2) {
      //层级2层,卖家通知
      key = this.$route.meta.title;
    } else if (this.$route.matched.length == 3) {
      //层级3层,买家通知
      key = `${this.$route.matched[this.$route.matched.length - 2].meta.title}->${this.$route.meta.title}`;
    }
    this.getConfigAll(key);
  },
  mounted() {},
  computed: {},
  methods: {
    //读取设置清单
    getConfigAll(type) {
      this.isLoading = true;
      getNoticeConfigAll(type)
        .then(res => {
          this.isLoading = false;
          let t = res.msg;

          //封装数据
          for (let o in t.base) {
            let l = [];
            //封装channel数据
            t.base[o].channel.forEach(e => {
              //匹配模板对象
              let xl = t.msgTemplateList.filter(_ => {
                return _.type == o && _.channel == e;
              });
              t.type[1].base_type = [1];
              if (xl.length > 0) {
                //匹配到对象
                l.push({
                  type:type,
                  channelIndex: e,
                  channelName: t.type[e].name,
                  channelType: t.type[e].base_type,
                  channelStatus: xl[0].status,
                  channelDefault: t.base[o].remarkData[e],
                  channelTemplate: xl[0]
                });
              } else {
                //无匹配数据
                l.push({
                  type:type,
                  channelIndex: e,
                  channelName: t.type[e].name,
                  channelType: t.type[e].base_type,
                  channelStatus: 0,
                  channelDefault: t.base[o].remarkData[e],
                  channelTemplate: {
                    type: o,
                    channel: e,
                    timing: t.base[o].timing,
                    is_base: t.type[e].name == '短信通知' ? 0 : 1,
                    template_id: null,
                    status: 0
                  }
                });
              }
            });
            //封装list数据
            this.list.push({
              name: o,
              channel: l,
              timing: t.base[o].timing,
              type:type
            });

            //console.log(JSON.stringify(this.list))
          }
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    //设置发送配置
    itemEdit(obj) {
      obj.redirectUrl = this.$route.fullPath;
      console.log(obj)
      this.$router.push({
        name: 'noticeItem',
        params: obj
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.header {
  background: #e0e3e8;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
}

.notice {
  display: flex;
  flex-wrap: wrap;

  .item {
    margin: 20px 20px 0 0;
    width: 325px;
    height: 200px;
    background: #fff;

    &:hover {
      cursor: pointer;
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    }

    > .title {
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #ebeef5;
      display: flex;

      .icon {
        margin-left: 20px;
        i {
          font-size: 20px;
        }
      }

      .txt {
        margin-left: 5px;
        font-weight: bold;
        font-size: 18px;
      }
    }

    .channel {
      display: flex;
      flex-direction: column;
      padding: 20px;

      .single {
        display: flex;
        height: 30px;
        line-height: 30px;

        .title {
          flex: 1;
          font-size: 14px;
        }

        .status {
          width: 20px;
          font-size: 18px;

          .el-icon-circle-check {
            color: #67c23a;
          }

          .el-icon-circle-close {
            color: #f56c6c;
          }
        }
      }
    }
  }
}
</style>
